import { ProFormProps } from '@ant-design/pro-components';
import { useNode } from '@craftjs/core';
import { PropsWithChildren } from 'react';
import { Form } from 'antd';

import { Settings } from './Settings';

export const DraggableForm = ({
  children,
  ...restProps
}: PropsWithChildren<Omit<ProFormProps, 'children'>>) => {
  const {
    connectors: { connect },
  } = useNode();

  return (
    <div
      ref={(ref) => connect(ref as HTMLElement)}
      style={{ border: '1px solid #eee', padding: 10 }}
    >
      <Form {...restProps} style={{ minHeight: 10 }}>
        {children}
      </Form>
    </div>
  );
};

DraggableForm.craft = {
  displayName: '表单',

  related: {
    settings: Settings,
  },
};
